#layout{
    overflow: auto;
    position: relative;
}
#main{
    margin-top:1.16rem;
}
#topbar>h1{
    width: 80%;
    margin: 0 auto;
    display: block;
    text-align: center;
    line-height: .86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#212121;
    font-size: .34rem;
}
.person-info{
    width:calc(100% - .6rem);
    width:-webkit-calc(100% - .6rem);
    width:-moz-calc(100% - .6rem);
    margin:.3rem;
    background: #fff;
    padding:.48rem 0;
    // position: fixed;
    // bottom: 0;
    // left: 0;
}
.person-info>div{
    float: left;
}
.info-left{
    width:62%;
}
.info-left>p{
    float: left;
    width:.9rem;
    height: .9rem;
    border: 1px solid #DEDEDE;
    border-radius: 100%;
    margin:0 .2rem 0 .3rem;
}
.info-left>ul{
    float: left;
}
.info-left>ul>li{
    font-size: .24rem;
    line-height: .48rem;
    color:#808080;
}
.info-left>ul>.tel-info{
    font-size: .32rem;
    color:#212121;
}
.info-left>p>img{
    width:100%;
    height: 100%;
}
.info-right{
    width:38%;
    line-height:.9rem; 
    text-align: center;
    position: relative;
}
.info-right>a{
    /*width:38%;*/
    line-height:.9rem;
    font-size: .24rem;
    color:#FF5555 ;
    display: block;
    margin:0 auto;
    position: relative;
}
.info-right::before{
    content: "";
    display: block;
    width:1px;
    height: .74rem;
    background:#dedede;
    position: absolute;
    top:50%;
    left: 0;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    z-index: 111;
}
.info-right>a::before{
    content: "";
    display: block;
    width:.28rem;
    height: .28rem;
    background:url('../img/Shape@3x.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    top:50%;
    left: 9%;
    transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    z-index: 111;
}
/* 开门start*/
#main>div{
    position: relative;
}
#main>.door-parent{
    height: 6.34rem;
    margin:.4rem .3rem 0;
    background-image: radial-gradient(50% 97%, #3ACF88 43%, #21A771 100%); 
    background-image: -webkit-radial-gradient(50% 97%, #3ACF88 43%, #21A771 100%); 
}
.door{
    width:3.28rem;
    height: 3.66rem;
    position: absolute;
    top:1rem;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    background:url('../img/door-close@2x.png') no-repeat center center;
    background-size: contain;
    z-index: 222;
}
.door.cur{
    transition: all linear .5s;
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -o-transition: all linear .5s;
    -ms-transition: all linear .5s;
    background: url('../img/door-open@2x.png') no-repeat center center;
    background-size: contain;
}
.bubble{
    width:1.56rem;
    height: 1.24rem;
    background: url('../img/open-success@2x.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    top:1rem;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    opacity: 0;
}
.bubble.cur{
    transition: all linear .5s;
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -o-transition: all linear .5s;
    -ms-transition: all linear .5s;
    top:.7rem;
    opacity: 1;
}
#main>.clock-btn{height: 2.66rem;line-height: 2.66rem;font-size: .3rem;color:#212121;text-align: center;margin:0 .3rem .4rem;background: #fff;}
.clock-btn>p{
    display: none;
}
.clock-btn>div{
    width:1.92rem;
    height:1.92rem;
    background: url('../img/hold-it@2x.png') no-repeat center center;
    background-size: contain;
    position: absolute;
    bottom: .36rem;
    left: 50%;
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
     -webkit-touch-callout:none;  /*系统默认菜单被禁用*/   
    -webkit-user-select:none; /*webkit浏览器*/   
    -khtml-user-select:none; /*早期浏览器*/   
    -moz-user-select:none;/*火狐*/   
    -ms-user-select:none; /*IE10*/   
    user-select:none;
}
.clock-btn>div.cur{
    transition: all linear .5s;
    -webkit-transition: all linear .5s;
    -moz-transition: all linear .5s;
    -o-transition: all linear .5s;
    -ms-transition: all linear .5s;
    background: url('../img/hold-end@2x.png') no-repeat center center;
    background-size: contain;
}
/* 开门end */